<template>
  <div>
    <!-- 用户头像名称部分  -->
    <div class="top" @click="login">
      <div class="topimgbox">
        <img
          :src="
            userinfo.photo
              ? userinfo.photo
              : 'https://m.mi.com/static/img/avatar.76a75b8f17.png'
          "
          class="topimg"
        />
      </div>
      <p class="login">{{ userinfo.userName || "登录/注册" }}</p>
    </div>
    <!-- 我的订单 -->
    <div class="order">
      <p class="orderp1">我的订单</p>
      <p class="orderp2">全部订单<span class="orderp2-span"></span></p>
    </div>
    <div class="status">
      <div class="statusitem">
        <img
          class="itemimg"
          src=""
        />
        <p class="itemp">代付款</p>
      </div>
      <div class="statusitem">
        <img
          class="itemimg"
          src=""
        />
        <p class="itemp">待收货</p>
      </div>
      <div class="statusitem">
        <img
          class="itemimg"
          src="https://m.mi.com/static/img/nav-4.d68723895f.png"
        />
        <p class="itemp">退换修</p>
      </div>
    </div>
    <!-- 会员中心 -->
    <div class="empty"></div>
    <div class="item1">
      <img
        class="img1"
        src=""
      />
      <div class="text">
        <p class="p1">会员中心</p>
        <p class="p2"></p>
      </div>
    </div>
    <div class="item2">
      <img
        class="img1"
        src=""
      />
      <div class="text">
        <p class="p1">我的优惠</p>
        <p class="p2"></p>
      </div>
    </div>
    <div class="empty"></div>
    <div class="item1">
      <img
        class="img1"
        src=""
      />
      <div class="text">
        <p class="p1">服务中心</p>
        <p class="p2"></p>
      </div>
    </div>
    <div class="item2">
      <img
        class="img1"
        src=""
      />
      <div class="text">
        <p class="p1">小米之家</p>
        <p class="p2"></p>
      </div>
    </div>
    <div class="empty"></div>
    <div class="item1">
      <img
        class="img1"
        src=""
      />
      <div class="text">
        <p class="p1">我的F码</p>
        <p class="p2"></p>
      </div>
    </div>
    <div class="item2">
      <img
        class="img1"
        src="https://m.mi.com/static/img/i-gift.ece9aa1222.png"
      />
      <div class="text">
        <p class="p1">礼物码兑换</p>
        <p class="p2"></p>
      </div>
    </div>
    <!-- 设置按钮 -->
    <div class="empty"></div>
    <div class="item2" @click="install">
      <img
        class="img1"
        src="https://m.mi.com/static/img/i-setting.fb9625b3f2.png"
      />
      <div class="text">
        <p class="p1">设置</p>
        <p class="p2"></p>
      </div>
    </div>
    <!-- 登录面板 -->
    <van-overlay :show="loginshow" @click.self="hidelogin">
      <div class="loginitem">
        <div class="logintop">
          <div class="topitem" @click="login_add=0" :class="login_add==0?'login-top-active':''">登入</div>
          <div class="topitem" @click="login_add=1" :class="login_add==1?'login-top-active':''">注册</div>
        </div>
        <div v-if="login_add==0">
          <div class="item">
            用户名 <input type="text" class="logininput" v-model="username" />
          </div>
          <div class="item">
            密码 <input type="password" class="logininput" v-model="password" />
          </div>
          <p v-show="msgshow" class="msgp" v-text="msg"></p>
          <van-button round type="info" @click="userLogin">登录</van-button>
        </div>
        <div v-else>
          <div class="item">
            用户名 <input type="text" class="logininput" />
          </div>
          <div class="item">
            密码 <input type="password" class="logininput" />
          </div>
          <p class="msgp"></p>
          <van-button round type="info" @click="useradd">注册</van-button>
        </div>
      </div>
    </van-overlay>
    <!-- 设置面板 -->
    <van-action-sheet
      v-model="InstallShow"
      :actions="InstallList"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { Overlay, ActionSheet, Toast, Button } from 'vant'

Vue.use(Overlay, ActionSheet, Toast, Button)
export default {
  data () {
    return {
      loginshow: false,
      msg: '',
      msgshow: false,
      username: '',
      password: '',
      userinfo: [],
      InstallShow: false,
      InstallList: [
        {
          name: '退出登录',
          color: '#CCCCCC',
          callback: this.userCancel,
          disabled: true
        }
      ],
      login_add: 0
    }
  },
  watch: {
    userinfo (newdata, olddata) {
      if (!newdata) {
        this.OffCancel('off')
      }
    }
  },
  created () {
    this.getUserinfo()
  },
  methods: {
    // 打开登录面板
    login () {
      this.loginshow = true
      this.login_add = 0
    },
    // 点击灰色背景隐藏登录面板
    hidelogin () {
      this.loginshow = false
    },
    // 用户登录
    userLogin () {
      if (!this.username) {
        this.msgshow = true
        this.msg = '请输入用户名'
        return
      }
      if (!this.password) {
        this.msgshow = true
        this.msg = '请输入密码'
        return
      }
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      this.request
        .post('/login', { username: this.username, password: this.password })
        .then((res) => {
          if (res.data.code == 404) {
            this.msgshow = true
            this.msg = res.data.msg
          } else {
            this.loginshow = false
            this.msgshow = false
            this.msg = ''
            localStorage.setItem('waiToken', res.data.token)
            localStorage.setItem('userID', res.data.userID)
            this.getUserinfo()
            Toast.clear()
          }
        })
    },
    // 获取用户信息
    getUserinfo () {
      if (localStorage.getItem('userID')) {
        this.request
          .post('/api/userinfo', { userID: localStorage.getItem('userID') })
          .then((res) => {
            this.userinfo = res.data.data
            this.$store.commit('changeIslogin', true)
            this.OffCancel()
          })
      }
    },
    // 设置按钮
    install () {
      this.InstallShow = true
    },
    // 点击取消按钮
    onCancel () {
      this.InstallShow = false
    },
    // 点击退出登录
    userCancel () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      this.OffCancel('off')
      setTimeout(() => {
        this.userinfo = []
        localStorage.removeItem('userID')
        localStorage.removeItem('waiToken')
        Toast.clear()
      }, 200)
    },
    // 退出登录按钮的禁用与启用  禁用需要传入off
    OffCancel (str) {
      if (str == 'off') {
        this.InstallList[this.InstallList.length - 1].disabled = true
        this.InstallList[this.InstallList.length - 1].color = '#CCCCCC'
      } else {
        this.InstallList[this.InstallList.length - 1].disabled = false
        this.InstallList[this.InstallList.length - 1].color = 'red'
      }
    },
    // 用户注册
    useradd () {
      Toast('功能未开放')
    }
  },
  mounted () {}
}
</script>

<style lang="less" scoped>
.empty {
  width: 100%;
  height: 0.65rem;
  background-color: #f5f5f5;
}
.top {
  padding: 1.05rem 0;
  background: url("../../assets/center/bg.63c8e19851.png") center 0 #f37d0f;
  background-size: auto 100%;
  display: flex;
  align-items: center;
}
.topimgbox {
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #fff;
  margin: 0 0.55rem 0 1.2rem;
}
.topimg {
  width: 2.75rem;
  height: 2.75rem;
  display: block;
}
.login {
  color: #fff;
  font-size: 0.855rem;
}
.order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5rem;
  border-bottom: 1px solid rgb(203, 203, 203);
}
.orderp1 {
  margin-left: 1.0375rem;
}
.orderp2 {
  margin-right: 1.0375rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  .orderp2-span {
    width: 0.625rem;
    height: 0.625rem;
    display: block;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    transform: rotate(45deg);
  }
}
.status {
  display: flex;
  align-items: center;
  padding: 1.25rem 0;
}
.statusitem {
  flex: 1;
}
.itemimg {
  width: 1.5625rem;
  display: block;
  margin: 0 auto 0.3125rem;
}
.itemp {
  text-align: center;
  font-size: 0.75rem;
  color: #535353;
}
.item1 {
  display: flex;
  height: 3.4375rem;
  align-items: center;
  .img1 {
    display: block;
    width: 1.375rem;
    padding: 0 1.25rem;
  }
  .text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #cccccc;
    .p1 {
      font-size: 0.855rem;
    }
    .p2 {
      width: 0.625rem;
      height: 0.625rem;
      display: block;
      border-top: 1px solid #333333;
      border-right: 1px solid #333333;
      transform: rotate(45deg);
      margin-right: 0.9375rem;
    }
  }
}
.item2 {
  display: flex;
  height: 3.4375rem;
  align-items: center;
  .img1 {
    display: block;
    width: 1.375rem;
    padding: 0 1.25rem;
  }
  .text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    .p1 {
      font-size: 0.855rem;
    }
    .p2 {
      width: 0.625rem;
      height: 0.625rem;
      display: block;
      border-top: 1px solid #333333;
      border-right: 1px solid #333333;
      transform: rotate(45deg);
      margin-right: 0.9375rem;
    }
  }
}

.loginitem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12.5rem;
  background: #fff;
  .logintop{
    display: flex;
    .topitem{
      flex: 1;
      font-size: .855rem;
      text-align: center;
      line-height:1.5rem;
    }
  }
  .item {
    display: flex;
    margin: 0.625rem 0;
    padding: 0 1.5625rem;
    justify-content: space-between;
    font-size: 0.75rem;

    .logininput {
      outline: none;
      border: none;
      width: 6.25rem;
      border: 1px solid #ccc;
    }
  }
  .item:nth-child(2) {
    margin-bottom: 0;
  }
  .van-button--round {
    font-size: 0.855rem;
    height: 1.625rem;
    display: block;
    margin: 0.9375rem auto 0.9375rem;
  }
  .msgp {
    width: 10rem;
    margin: 0 auto 0.3125rem;
    font-size: 0.75rem;
    color: red;
  }
}
.login-top-active {
  background-color:#00adb5;
  color: #eeeeee;
}
</style>
